<template>
  <s-layout class="set-wrap" title="全部评论" :bgStyle="{ color: '#f7f7f7' }">
    <view class="flex flex-col gap-4 p-4">
      <view class="flex overflow-hidden flex-col gap-4 p-4 bg-white rounded-lg" v-if="state.commentList.length">
        <view class="flex flex-col gap-4">
          <view class="flex flex-col gap-3" v-for="(i, k) in state.commentList" :key="k">
            <view class="flex justify-between items-center">
              <view class="flex gap-2 items-center">
                <view class="w-[36px] h-[36px] rounded-full bg-gray-200 overflow-hidden">
                  <image :src="i.user.avatar" class="size-full" mode="scaleToFill" />
                </view>
                <view class="flex flex-col justify-between">
                  <view class="text-[15px] text-[#1A1A1A]">{{ i.user.nickname }}</view>
                  <u-rate count="5" v-model="i.score" readonly></u-rate>
                </view>
              </view>
              <view class="text-[12px] text-[#BABABA]">{{ i.createtime }}</view>
            </view>
            <view class="text-[15px] text-[#1A1A1A]">
              {{ i.content }}
            </view>
            <view class="grid grid-cols-3 gap-2 w-full">
              <view
                class="aspect-square overflow-hidden col-span-1 bg-gray-200 rounded-lg"
                v-for="(ii, kk) in i.images"
                :key="kk"
                @click="previewImage(ii)"
              >
                <image :src="ii" mode="scaleToFill" class="size-full" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <s-empty v-if="!state.commentList.length" text="暂无数据" icon="/static/data-empty.png" />
    <uni-load-more status="noMore" v-if="state.commentList.length"></uni-load-more>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';

  const state = ref({
    commentList: [], // 评论列表

    loadStatus: '',
    loading: true,
    page: 1,
  });
  onLoad((e) => {
    state.value.id = e.id;
    storeEvaluateList(); // 评论列表
  });
  onReachBottom(() => {
    if (state.value.commentList.length === 0) {
      return;
    }
    state.value.page++;
    storeEvaluateList();
  });

  storeEvaluateList();
  function storeEvaluateList() {
    sheep.$api.yy
      .storeEvaluateList({
        id: state.value.id,
        page: state.value.page,
      })
      .then((res) => {
        console.log('🚀 ~ storeEvaluateList ~ res:', res);
        state.value.commentList = [...state.value.commentList, ...res.data.data];
        //
      });
  }
  function previewImage(ii) {
    // 预览单张图片
    uni.previewImage({
      urls: [ii],
    });
  }
</script>

<style lang="scss" scoped></style>
